import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: { //令牌初始化
    token: localStorage.getItem('token') || '',
    //假设本地存储中有
    cart: JSON.parse(localStorage.getItem('cart')) || []
  },
  mutations: {
    setToken(state,token) {
      state.token = token
    },
    //修改购物车商品数组
    addCart(state,item) {
      //item 商品item
      //检查购物车是否添加过这个选项
      const good = state.cart.find( v => v.id == item.id);
      if (good) { //有，则加数量
        good.cartCount += 1
      } else { //没有，则新增商品
        state.cart.push({
          ...item,
          cartCount: 1
        })
      }
    },
    countMinus(state, index){ //购物车 减操作

      //index,传入 项的索引
      const item = state.cart[index];
      if (item.cartCount > 1) {
        item.cartCount -= 1
      } else {
        state.cart.splice(index,1)
      }
    },
    countAdd(state, index){
      const item = state.cart[index];

      item.cartCount += 1
    }
  },
  actions: {

  },
  getters: { //getters的属性是只读
    //就是显示在界面中，做绑定的
    //不要把他的值作为函数参数，
    isLogin: state => {
      return !!state.token; //token是个字符串，转化为布尔值
    },
    cartTotal: state => {
      let num = 0;
      // 计算购物车中项目总数
      console.log('state.cart',state.cart);
      
      state.cart.forEach( v => {
        num += v.cartCount
      });
      console.log('总数量 num',num);
      
      return num;
    },
    //购物车总价计算
    total: state => { //num累加器， v 当前选项 ，起始值为0
      return state.cart.reduce((num,v) => num += v.cartCount *v.price,0)
    }
    //每次把最新累加的价格返回
  }
});

//关于mutation的监听，mutation的值发生变化，如何知道？

//订阅store的变化

//订阅的方法是一个回调函数，参数mutations-发生改变的mutations所组成的对象

//统一监听mutations的变化，做持久化存储
store.subscribe( (mutation, state) => {
  switch (mutation.type) { //当前发生变化的mutations的名字
    case 'setToken':
      localStorage.setItem('token', JSON.stringify(state.token))
      break;
    case 'addCart':
    localStorage.setItem('cart',JSON.stringify(state.cart))
    break;
    default:
      break;
  }
})

export default store;


